<?php

/*
 * diplome/index.phtml
 */
?>
<?php

$title = 'Liste des Diplômes';
$this->headTitle($title);
?>
<div class="content-head">
    <h3>
<?php echo $title; ?>
	<img src='<?php echo $this->basePath() . '/img/rhx/refresh-16x16.png' ?>' title="Actualiser la liste" class='rhx-refresh'>
    </h3>
    <div class="toolbar">
	<div class="toggle add" title="Ajouter">
            <a href="#" style="display: block; width: 100%; height: 100%;" onclick="$('.add-toggle').toggle('slow'); return false;"></a>
        </div>
    </div>
</div>

<div class="content-body">
    <div class="add-toggle">
	<div class="list-container">
	    <table class="table table-striped list-table">
		<thead>
		    <tr>
			<td width="45%">Libellé</td>
			<td width="45%">Description</td>
			<td width="10%">&nbsp;</td>
		    </tr>
		</thead>
		<tbody>
		    <tr>			
			<td>
			    <a href="#" id="libelleNew" data-type="text"></a>
			</td>
			<td>
			    <a href="#" id="descriptionNew" data-type="text"></a>
			</td>
			<td>
			    <button class="btn btn-success ajouter">Ajouter</button>
			</td>
		    </tr>
		</tbody>
	    </table>
	</div>
	<form id="formNew" action="#" method="post">
	    <input type="hidden" id="id" name="id" value="0">
	    <input type="hidden" id="data-libelle" name="libelle" value="">
	    <input type="hidden" id="data-description" name="description" value="">
	</form>
    </div>

    <!-- CONTENU AJAX -->
    <div id='content-data'>
	<!-- AJAX LOADING -->
    </div>
</div>

<script type="text/javascript">
// Démarrage
$(function(){
    // Editable
	$('#libelleNew').editable({
	    title: "Nouveau Libellé de Diplôme",
	    validate: function(value) {
		value = $.trim(value);
		$('#data-libelle').val(value);
	    }
	});
	$('#descriptionNew').editable({
	    title: "Nouvelle Description de Diplôme",
	    validate: function(value) {
		value = $.trim(value);
		$('#data-description').val(value);
	    }
	});
	// Ajouter
	$('.ajouter').click(function(e) {
	    e.preventDefault();
	    libelle = $('#data-libelle').val();
	    if (libelle.length < 1){
		alert("Le libellé du Diplôme est trop court ou vide");

		return false;
	    }else{
		// Enregistrement dans la base de données
		ajax = $.ajax({
		    type: 'post',
		    url: '<?php echo $this->url('RHX/default', array('controller'	 => 'diplome', 'action'	 => 'addNew')); ?>',
		    data: $('#formNew').serialize()
		});
		ajax.done(function(data){
		    // Rafraichir la liste
		    refresh();
		    $('#libelleNew, #descriptionNew').text('Vide');
		    $('#data-libelle, #data-description').val('');
		    $('.add-toggle').toggle();
		});
		ajax.fail(function(){
		    alert("Une erreur est survenue lors de l'insertion du nouveau diplome");
		});
	    }
	});
	// Update
	$('.rhx-refresh').click(function(e){
	    e.preventDefault();
	    refresh();
	});

	// Mise à jour de l'interface
	refresh();
    });

    // Function de rafraichissement
    function refresh(){
	ajax = $.ajax({
	    type: 'post',
	    url : '<?php echo $this->url('RHX/default', array('controller'	 => 'diplome', 'action'	 => 'loadIndex')); ?>'
	});
	ajax.done(function(data){
	    $('#content-data').hide().html(data).fadeIn('normal');
	});
	ajax.fail(function(){
	    $('#content-data').hide().html("<div class='rh-error'>Contenu Impossible à charger</div>").fadeIn('normal');
	});

	return false;
    }
</script>
